<template>
  <div style="height: 100%">
    <div class="table">
      <el-table :data="dataList" ref="singleTable" v-loading="loading" @row-click="rowClick" row-class-name="row-cursor" highlight-current-row>
        <el-table-column type="index" label="序号" width="60" header-align="center" align="center"></el-table-column>
        <el-table-column label="调度时间">
          <template slot-scope="scope">{{scope.row.startTime | formatDate}}</template>
        </el-table-column>
        <el-table-column label="执行状态">
          <template slot-scope="scope">
            <span class="not zxz" v-if="scope.row.status == 0">
              执行中
              <div class="loader">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </span>
            <span class="not success" v-else-if="scope.row.status == 1">执行成功</span>
            <span class="not error" v-else>执行失败</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager">
      <el-pagination
        small
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="1"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { formatDateTime } from "@/libs/utils"

  export default {
    name: "HistoryList",
    props: {
      params: {
        type: Object,
        required: true
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDateTime(date, 'yyyy-MM-dd hh:mm:ss');
      }
    },
    data() {
      return{
        loading: true,
        dataList: [],
        query: {
          flag: this.params.flag,
          pageNum: 1,
          pageSize: 10,
          startTime: this.params.startTime,
          endTime: this.params.endTime,
          taskInvokeId: this.params.taskInvokeId
        },
        total: 0
      }
    },
    created() {
      this.initData();
    },
    methods: {
      /**初始化方法**/
      initData() {
        console.log("params: ", this.params);
        this.$http.post("/taskInvoke/getHistoryInvokeDetail", this.query).then(rsp => {
          this.dataList = rsp.list;
          this.total = rsp.total;
          setTimeout(() => {
            this.loading = false;
            // this.$refs.singleTable.setCurrentRow(this.dataList[0]);
            // this.rowClick(this.dataList[0])
          }, 500);
        });
      },
      /**改变显示条数**/
      sizeChange(val) {
        this.query.pageSize = val;
        this.initData();
      },
      /**改变页数**/
      currentChange(val) {
        this.query.pageNum = val;
        this.initData();
      },
      /**点击每行**/
      rowClick(row) {
        this.$emit("rowClickCall", row);
      }
    }
  }
</script>

<style>
  .row-cursor{
    cursor: pointer;
  }
</style>
<style scoped>
  .table{
    height: 680px;
  }
  .not{position: relative;padding-left: 10px;}
  .not:before{position: absolute;content: "";width: 6px;height: 6px;border-radius: 50%;left:0;top:7px;}
  .not.error,.steps-error{color: #f04134}
  .not.error:before{background: #f04134}
  .not.success,.steps-success{color: #108de9}
  .not.success:before{background: #108de9}
  .not.zxz,.steps-zxz{color: #669900}
  .not.zxz:before{background: #669900}
  .not.dzx,.steps-dzx{color: #cccccc}
  .not.dzx:before{background: #cccccc}
  .pager{
    position: relative;
    padding: 10px 0 10px 10px;
  }
</style>
